<template>
  <div class="page-main" v-title data-title="亚米消息详情">
    <home-nav :userData="userinfo"></home-nav>
    <div class="banner"><span>亚米消息详情</span></div>
    <div class="container">
      <div
        class="header"
        style="padding: 10px; background-color: white; border: solid 1px #e2e2e2; margin-bottom: 15px"
      >
        <div style="display: flex; justify-content: flex-start"></div>
        <div style="display: flex; justify-content: flex-end">
          <a-button class="hte-btn del-btn" @click="handleSave">保存</a-button>
        </div>
      </div>
      <div class="content-list">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <section>
            <div class="section-header">基础信息</div>
            <a-row :gutter="24">
              <a-col :span="8">
                <a-form-model-item label="接收人:" prop="toUser">
                  <a-input v-model="form.toUser" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="接收部门:" prop="toDept">
                  <a-input v-model="form.toDept" />
                </a-form-model-item>
              </a-col>
              <a-col :span="8">
                <a-form-model-item label="标题:" prop="title">
                  <a-input v-model="form.title" :maxLength="64" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-model-item label="连接:" prop="url">
                  <a-input v-model="form.url" />
                </a-form-model-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-model-item label="内容:" prop="digest">
                  <a-textarea
                    :auto-size="{ minRows: 2, maxRows: 6 }"
                    :maxLength="120" v-model="form.digest" />
                </a-form-model-item>
              </a-col>
            </a-row>
          </section>
        </a-form-model>
      </div>
    </div>
  </div>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import { getQuery } from '@/utils/common.js'
export default {
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
  },
  data() {
    return {
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'ContractReportInfo',
      },
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      id: getQuery('id', this),
      form: {},
      rules: {
        toUser: [{ required: true, message: '请输入', trigger: 'blur' }],
        title: [{ required: true, message: '请输入', trigger: 'blur' }],
        digest: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
      urls: {
        info: '/hteYamiMsg/info',
        edit: '/hteYamiMsg/edit',
      },
    }
  },
  created() {},
  mounted() {
    this.fetchForm()
  },
  watch: {},
  methods: {
    fetchForm() {
      if (this.id) {
        getAction(this.urls.info + '?id=' + this.id).then((res) => {
          if (res.success) {
            this.form = res.result
          } else {
            this.$message.error('加载数据失败')
          }
        })
      }
    },

    /**
     * 保存信息
     */
    async handleSave() {
      let valid = await this.$refs.ruleForm.validate()
      if (!valid) {
        this.$messageWorkReport.warning('请根据提示将表单填写完整')
        return false
      }
      postAction(this.urls.edit, this.form).then((res) => {
        if (res.success) {
          if (this.id) {
            this.$message.success('保存成功')
            this.fetchForm()
          } else {
            this.$route.push('/emailLogEdit?id=' + res.result.id)
          }
        } else {
          this.$message.error('保存失败' + res.message)
        }
      })
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/hte-main.less';

.page-main {
  .container {
    .content {
      margin-top: 20px;

      section {
        margin-bottom: 18px;

        .section-table {
          .add-btn {
            margin-left: 0;
            margin-bottom: 10px;
          }

          /deep/ .a-upload__input {
            display: none !important;
          }
        }
      }
    }
  }

  .tips-box {
    margin-top: 32px;

    .add-btn {
      width: 180px;
      height: 40px;
      line-height: 40px;
      background-color: #4095e4;
      border-radius: 2px;
    }
  }
}

/deep/ .el-upload__input {
  display: none !important;
}
</style>
